<template>
  <a-layout id="main_layout">

    <MyHeader />

    <div class="main_wrap">
      <div class="index_left">
        <FirstMenu />
      </div>
      <div class="index_right">
        <router-view></router-view>
      </div>
    </div>


    <UpdateProtect v-if="useProtect_states.show_protect_getter"></UpdateProtect>

    <EditPolicy  v-if="useEdit_states.show_edit_getter"></EditPolicy>

    <StorageControl v-if="useControl_states.show_control_getter"></StorageControl>

    <!-- <GlobalCurve  v-if="useDiff_states.show_diff_getter"></GlobalCurve> -->

    <ShowCopy v-if="useCopy_state.show_copy_getter"></ShowCopy>


  </a-layout>
</template>

<script setup>
import {
  ref,
  onMounted,
  onUpdated,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  onActivated,
  onDeactivated,
  onServerPrefetch,
  getCurrentInstance,
  reactive
} from 'vue';



import { onBeforeRouteLeave, onBeforeRouteUpdate, useRouter } from 'vue-router'

import { storeToRefs } from 'pinia';

import MyHeader from '@/components/MyHeader.vue';

import FirstMenu from '@/components/FirstMenu.vue';


// import UpdatePassword from '@/components/UpdatePassword.vue';
import StorageControl from '@/components/StorageControl.vue';
// import XietongSetting from '@/components/global_dailog/XietongSetting.vue';
// import UpdatePrice from '@/components/global_dailog/UpdatePrice.vue';
import UpdateProtect from '@/components/global_dailog/UpdateProtect.vue';
// import GlobalCurve from '@/components/global_dailog/GlobalCurve.vue';
import EditPolicy from '@/components/EditPolicy.vue';
import ShowCopy from '@/components/global_dailog/ShowCopy.vue';


import { useShowPassword } from '@/stores/showPassword.js';
import { useControl } from '@/stores/showControl.js';
import { useXietong } from '@/stores/showXietong.js';
import { usePrice } from '@/stores/showPrice.js';
import { useProtect } from '@/stores/showProtect.js';
import { useEdit } from '@/stores/showEdit.js';
import { useDiff } from '@/stores/showDiff.js';

import { useCopy } from '@/stores/showCopy.js';



let useCopy_state = useCopy();

let states = useShowPassword();

let useControl_states = useControl();

let useXietong_states = useXietong();

let usePrice_states = usePrice();
let useProtect_states = useProtect();

let useEdit_states=useEdit();

let useDiff_states=useDiff();




const _globalProperties = getCurrentInstance().appContext.config.globalProperties;


onMounted(() => {

  // _globalProperties.$websocket_init();  按需引用websocket
  // console.log("_globalProperties",_globalProperties);
  // _globalProperties.$message.success({
  //   content: "组件被加载了-"
  // })

});

onBeforeUnmount(() => {
  // _globalProperties.$websocket_close();

})
</script>

<style src="@/assets/css/public.css" scoped></style>
<style scoped>
.index_left {
  /* color:#FFF; */
  border-right: 1px solid rgb(21, 106, 185);
  
}

#main_layout {
  height: 100%;
  box-sizing: border-box;
  overflow:hidden;
}

.main_wrap {
  height: calc(100% - 60px);
  background-color: #021132;
  display: flex;
}

.index_left {
  width: 120px;
}

.index_right {
  flex: 1;
  /* overflow-x:hidden; */
  overflow: hidden;;
}

.index_right_top {
  display: flex;
  height: 45px;
  justify-content: space-between;
}


</style>
